<template>
  <view class="page-container w-[750rpx] bg-gray-50 mx-auto">
    <!-- 页面标题 -->
    <view class="page-header bg-[#27c530] text-white p-[30rpx]">
      <text class="text-[32rpx] font-bold">我的医疗记录</text>
    </view>

    <div class="px-4 mt-6 mb-32rpx">
      <div class="grid grid-cols-4 gap-4">
        <div class="text-center" @click="goToHealthExamRecord">
          <div class="iconss bg-blue-100 text-blue-600 mx-auto">
            <IconFont font-class-name="iconfont" class-prefix="icon" size="40" name="yiliao1" />
          </div>
          <div class="text-sm font-medium">检查记录</div>
        </div>
        <div class="text-center" @click="goToPastOperation">
          <div class="iconss bg-purple-100 text-purple-600 mx-auto">
            <IconFont font-class-name="iconfont" class-prefix="icon" size="40" name="yiliao2" />
          </div>
          <div class="text-sm font-medium">手术史</div>
        </div>
        <div class="text-center" @click="goToPastAllergy">
          <div class="iconss bg-green-100 text-green-600 mx-auto">
            <IconFont font-class-name="iconfont" class-prefix="icon" size="40" name="-yiliao-bingdu" />
          </div>
          <div class="text-sm font-medium">过敏史</div>
        </div>
        <div class="text-center" @click="goToHealthVacc">
          <div class="iconss bg-orange-100 text-orange-600 mx-auto">
            <IconFont font-class-name="iconfont" class-prefix="icon" size="40" name="yiliao_" />
          </div>
          <div class="text-sm font-medium">预防接种</div>   
        </div>
       
      </div>
    </div>

    <view class="text-center text-28rpx font-bold p-8">就诊记录</view>

     <!-- 记录列表 -->
     <view class="timeline-container px-[24rpx] pb-[60rpx] relative">
      <!-- 时间轴主线 - 使用渐变和动画效果 -->
      <view
        class="timeline-line absolute left-[100rpx] top-0 bottom-0 w-[6rpx] bg-gradient-to-b from-transparent via-green-400 to-transparent z-0 overflow-hidden">
        <view class="absolute top-0 left-0 w-full h-[40rpx] bg-green-400 animate-[pulse_3s_infinite]"></view>
      </view>

      <view v-for="(record, index) in records" :key="record.id" class="timeline-item relative mb-[60rpx] pl-[140rpx]">
        <!-- 时间轴节点 - 3D效果 -->
        <view
          class="timeline-dot absolute left-[84rpx] top-[30rpx] w-[32rpx] h-[32rpx] rounded-full bg-gradient-to-br from-green-400 to-green-600 border-4 border-white shadow-[0_0_0_4px_rgba(39,197,48,0.3)] z-10 flex items-center justify-center animate-[pulseDot_2s_infinite]">
          <view class="dot-inner w-[12rpx] h-[12rpx] rounded-full bg-white"></view>
          <view
            class="absolute top-0 left-0 w-full h-full rounded-full bg-green-400 opacity-0 animate-[ripple_2s_infinite]">
          </view>
        </view>

        <!-- 时间轴连接线 - 增加渐变效果 -->
        <view
          class="timeline-connector absolute left-[116rpx] top-[46rpx] w-[24rpx] h-[2rpx] bg-gradient-to-r from-green-500 to-gray-200 z-10">
        </view>

        <!-- 时间标签 -->
        <view class="time-label absolute left-0 top-[20rpx] w-[80rpx] text-center">
          <text class="time-day block text-[42rpx] font-bold text-green-600 leading-none">{{ formatDay(record.seeDate)
            }}</text>
          <text class="time-month block text-[24rpx] font-semibold text-green-700 mt-[-4rpx]">{{
            formatMonth(record.seeDate) }}</text>
          <text class="time-year block text-[20rpx] text-gray-500 font-medium mt-[-4rpx]">{{ formatYear(record.seeDate)
            }}</text>
        </view>

        <!-- 主要内容卡片 - 添加3D效果和深度 -->
        <view
          class="content-card bg-white rounded-[24rpx] shadow-[0_10rpx_30rpx_rgba(0,0,0,0.08)] overflow-hidden border border-gray-100 transition-all duration-300 transform hover:translate-y-[-5rpx] hover:shadow-[0_15rpx_40rpx_rgba(39,197,48,0.15)]"
          @click="toggleDetail(record.id)">
          <view class="main-info p-[30rpx] transition-colors duration-300 relative">
            <!-- 装饰元素 -->
            <view class="absolute top-0 left-0 w-[12rpx] h-full bg-gradient-to-b from-green-300 to-green-500"></view>

            <view class="flex items-start justify-between pl-[16rpx]">
              <!-- 医院信息 -->
              <view class="hospital-info flex-1">
                <text class="hospital-name block text-[32rpx] text-gray-800 font-bold mb-[16rpx]">{{ record.orgName
                  }}</text>
                <view
                  class="department-badge bg-gradient-to-r from-blue-500 to-blue-600 px-[20rpx] py-[6rpx] rounded-[16rpx] inline-block shadow-sm">
                  <text class="department-text text-white text-[24rpx] font-bold">{{ record.depName }}</text>
                </view>
              </view>

              <!-- 患者姓名和展开按钮 -->
              <view class="flex items-center">
                <text class="patient-name text-[28rpx] text-gray-700 font-bold mr-[12rpx]">{{ record.name }}</text>
                <view class="expand-icon transform transition-transform duration-300"
                  :class="{ 'rotate-180': expandedItems.includes(record.id) }">
                  <IconFont name="icon-arrow-down" class="text-[28rpx] text-gray-500" />
                </view>
              </view>
            </view>

            <!-- 简要症状信息 -->
            <view v-if="record.symptom || record.phySign"
              class="brief-symptoms mt-[20rpx] pl-[16rpx] pt-[12rpx] border-t border-gray-100">
              <view class="flex items-start">
                <view
                  class="symptom-icon w-[36rpx] h-[36rpx] bg-green-100 rounded-full flex items-center justify-center mr-[12rpx]">
                  <text class="text-[24rpx]">📋</text>
                </view>
                <text class="brief-text text-[24rpx] text-gray-600">{{ record.symptom || '' }}{{ record.symptom &&
                  record.phySign ? ' | ' : '' }}{{ record.phySign || '' }}</text>
              </view>
            </view>
          </view>

          <!-- 详细信息（可折叠） -->
          <view v-show="expandedItems.includes(record.id)" class="detail-section bg-gray-50 border-t border-gray-200">
            <view class="detail-content p-[30rpx]">
              <!-- 详细信息 -->
              <!-- <view class="details-list flex flex-col gap-[20rpx]">
            <view v-if="record.diagDsc" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">📋</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">诊断</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.diagDsc }}</text>
              </view>
            </view>

            <view v-if="record.symptom" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">💊</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">症状</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.symptom }}</text>
              </view>
            </view>

            <view v-if="record.phySign" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">🌡️</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">体征</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.phySign }}</text>
              </view>
            </view>

            <view v-if="record.detail" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">📄</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">其他</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.detail }}</text>
              </view>
            </view>

            <view v-if="record.note" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">📝</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">备注</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.note }}</text>
              </view>
            </view>
          </view> -->

              <!-- 操作按钮 -->
              <view class="action-buttons mt-[30rpx] flex gap-[20rpx]">
                <nut-button size="small"
                  class="flex-1 rounded-[16rpx] font-bold text-[26rpx] bg-gradient-to-r from-green-500 to-green-600 border-0 shadow-md"
                  @click.stop="goEdit(record.id)">
                  <template #icon>
                    <IconFont name="edit" class="text-[24rpx] mr-[8rpx]" />
                  </template>
                  编辑
                </nut-button>
                <nut-button size="small"
                  class="flex-1 rounded-[16rpx] font-bold text-[26rpx] bg-gradient-to-r from-red-500 to-red-600 border-0 shadow-md"
                  @click.stop="deleteRecord(record.id)">
                  <template #icon>
                    <IconFont name="del" class="text-[24rpx] mr-[8rpx]" />
                  </template>
                  删除
                </nut-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 分页 -->
    <!-- <view v-if="total > pageSize" class="pagination-container flex justify-center py-[32rpx]">
      <nut-pagination v-model="currentPage" :total="total" :page-size="pageSize" @change="onPageChange"
        class="custom-pagination" />
    </view> -->

    <!-- 悬浮添加按钮 -->
    <view class="fab-container fixed bottom-[48rpx] right-[48rpx] z-50">
      <nut-button type="success"
        class="!w-[90rpx] !h-[90rpx] !min-w-[90rpx] !min-h-[90rpx] rounded-full bg-gradient-to-br from-green-500 to-green-600 shadow-lg transition-transform duration-300 hover:scale-110"
        @click="goAdd">
        <template #icon>
          <IconFont name="uploader" size="30" class="text-white" />
        </template>
      </nut-button>
    </view>



  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { request } from '@/service/request'
import { IconFont } from '@nutui/icons-vue-taro'
import { localStg } from '@/utils'

const loading = ref(false)
const records = ref<any[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const expandedItems = ref<string[]>([])

const searchForm = reactive({
  name: '',
  recordid: '',
  orgName: ''
})

onMounted(() => {
  const obj = localStg.get("demographicInfo");
  // obj
  if (obj) {
    searchForm.recordid = obj.recordid;
  }
  loadRecords()
})

function goToHealthExamRecord() {
  Taro.navigateTo({
    url: '/package-card/historys/health-exam-record/index'
  })
}

function goToPastOperation() {
  Taro.navigateTo({
    url: '/package-card/historys/past-operation/index'
  })
}

function goToPastAllergy() {
  Taro.navigateTo({
    url: '/package-card/historys/past-allergy/index'
  })
}

function goToHealthVacc() {
  Taro.navigateTo({
    url: '/package-card/historys/health-vacc/index'
  })
}

async function loadRecords() {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      ...searchForm
    }

    const result = await request.get<any>('/health_records/health_seedoc/healthSeeDocInfo/list', params, {
      useErrMsg: true
    })

    if (result.success) {
      records.value = result.success.records || []
      total.value = result.success.total || 0
    }
  } catch (error) {
    // 加载数据失败
    Taro.showToast({ title: '加载数据失败', icon: 'error' })
  } finally {
    loading.value = false
  }
}

function searchRecords() {
  currentPage.value = 1
  loadRecords()
}

function onPageChange(page: number) {
  currentPage.value = page
  loadRecords()
}

function formatDate(dateStr: string) {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

function formatDay(dateStr: string) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.getDate().toString()
}

function formatMonth(dateStr: string) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const month = date.getMonth() + 1
  return month.toString() + '月'
}

function formatYear(dateStr: string) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.getFullYear().toString()
}

function toggleDetail(id: string) {
  const index = expandedItems.value.indexOf(id)
  if (index > -1) {
    expandedItems.value.splice(index, 1)
  } else {
    expandedItems.value.push(id)
  }
}

function goAdd() {
  Taro.navigateTo({
    url: '/package-card/historys/healthSeeDocInfo/add'
  })
}

function goView(id: string) {
  Taro.navigateTo({
    url: `/package-card/historys/healthSeeDocInfo/view?id=${id}`
  })
}

function goEdit(id: string) {
  Taro.navigateTo({
    url: `/package-card/historys/healthSeeDocInfo/edit?id=${id}`
  })
}

async function deleteRecord(id: string) {
  try {
    const result = await Taro.showModal({
      title: '确认删除',
      content: '确定要删除这条就诊记录吗？',
      confirmText: '删除',
      cancelText: '取消'
    })

    if (result.confirm) {
      await request.delete(`/health_records/health_seedoc/healthSeeDocInfo/delete?id=${id}`, {}, {
        useErrMsg: true
      })

      Taro.showToast({ title: '删除成功', icon: 'success' })
      loadRecords()
    }
  } catch (error) {
    // 删除失败
    Taro.showToast({ title: '删除失败', icon: 'error' })
  }
}
</script>

<style>
/* 自定义分页器样式 */
.custom-pagination .nut-pagination-item {
  border-radius: 12rpx !important;
  border: 1rpx solid #e5e7eb !important;
}

.custom-pagination .nut-pagination-item.active {
  background: linear-gradient(to right, #27c530, #22a825) !important;
  color: white !important;
  border: none !important;
}

/* 加载动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* 卡片悬停效果 */
.content-card {
  transition: all 0.3s ease;
}
.iconss{
  width: 100rpx;
  height: 100rpx;
  border-radius: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
</style>